<!DOCTYPE html>
<html>
<head>
	<title>LoginPage</title>
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<script type="text/javascript" src="js/login.js"></script>
	
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		
	<link rel="stylesheet" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" href="css/loginPage.css"/>
</head>
<body class="bodyStyle"> 
  <!--  The Header -->  
	<div class="inner cover">
        <h1 class="cover-heading topHeader">Surfers Paradise</h1>
        <p class="lead secondHeader">Check out the best places<br>
        to surf and daily conditions
    </div>
    
    <!--  The login box -->
	<div class= "loginBox">
		<div ng-app="login" ng-controller="loginController" ng-submit="LoginForm.$valid && ValidateUser(LogUsername, Password)">
			<form novalidate name="LoginForm" id="login">
				<div class="form-group loginBoxFromTop" >
		    		<label class = LoginLabel >User Name</label>
		    		<input type="text" class="form-control loginInput" name="LogUsername" placeholder="Username" ng-model="LogUsername" ng-maxlength=10 required/>
				</div>
				<div class="form-group loginBoxFromMiddle">
		  			<label class = PasswordLabel for="Password">Password</label>
		  			<input type="password" class="form-control loginInput" id="Password" name="Password" placeholder="Password" ng-model="Password" ng-maxlength=8 required/>
				</div>
				<div class="container LoginButton">
      				<button type="submit" class="Mybutton">LOG IN</button>
      				<div class="form-group">
        				<div class="col-md-55 control">
            				<div class = "LoginNewUser" >
                				New user? 
                			<a class="Newuser" href=signup.html>
                				Sign Up Here
                			</a>
                			</div>
            			</div>
        			</div>
    			</div>
			</form>
		</div>
	</div>
	<!-- Alert message if the user entered a wrong username or password -->
	<div class="alert alert-danger alert-dismissible MyAlerts" id="errAlert" role="alert">
  		<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  		<strong>Sorry,</strong> username or password are incorrect
	</div>
	
</body>
</html>